<template>
  <div>
    <!--页面区域-->
    <div class="page-view">
      <div class="table-operations">
        <a-space>
          <a-input-search addon-before="订单号" enter-button @search="onSearch" @change="onSearchChange" />
          <!-- <a-button @click="handleBatchDelete">批量删除</a-button> -->
        </a-space>
      </div>
      <a-tabs default-active-key="0" v-model:value="data.queryParam.status" @change="onTabChange">
        <a-tab-pane key="0" tab="全部">
        </a-tab-pane>
        <a-tab-pane :key="key" :tab="orderStatusDict[key]" v-for="key in Object.keys(orderStatusDict)">
        </a-tab-pane>
      </a-tabs>
      <a-table size="middle" rowKey="id" :loading="data.loading" :data-source="data.dataList" :showHeader="false"
        @change="getDataList" :scroll="{ x: 'max-content', y: '65vh' }" :row-selection="rowSelection"
        :pagination="pagination">
        <a-table-column key="all">
          <template #default="{ record }">
            <a-card class="order-item-view">
              <template #title>
                <div class="header">
                  <a-space>
                    <div>
                      <span class="text">订单号：</span>
                      <span class="num mg-4">#</span>
                      <span class="num">{{ record.orderNumber }}</span>
                    </div>
                    <div>
                      <span class="text">下单时间：</span>
                      <span class="time">{{ getFormatTime(record.orderTime, true) }}</span>
                    </div>
                    <div>
                      <span class="text">支付时间：</span>
                      <span class="time">{{ getFormatTime(record.payTime, true) }}</span>
                    </div>
                  </a-space>
                </div>
              </template>
              <template #extra>
                <a-space class="header">
                  <a-popconfirm v-if="record.status === '1'" title="确认取消" ok-text="是" cancel-text="否"
                    @confirm="confirmCancel(record)">
                    <a-button type="default" size="small">
                      取消
                    </a-button>
                  </a-popconfirm>
                  <a-popconfirm v-if="record.status === '2'" title="确认接单?" ok-text="是" cancel-text="否"
                    @confirm="confirmAccept(record)">
                    <a-button type="primary" size="small">
                      接单
                    </a-button>
                  </a-popconfirm>
                  <a-popconfirm v-if="record.status === '3'" title="确认配货?" ok-text="是" cancel-text="否"
                    @confirm="confirmAllocated(record)">
                    <a-button type="primary" danger size="small">
                      配货
                    </a-button>
                  </a-popconfirm>
                  <a-popconfirm v-if="record.status === '4'" title="确认发货?" ok-text="是" cancel-text="否"
                    @confirm="confirmDeliver(record)">
                    <a-button type="primary" danger size="small">
                      发货
                    </a-button>
                  </a-popconfirm>
                  <a-popconfirm v-if="record.status === '6'" title="确认删除？" ok-text="是" cancel-text="否"
                    @confirm="confirmDelete(record)">
                    <a-button type="default" size="small">
                      删除
                    </a-button>
                  </a-popconfirm>
                  <span class="text">订单状态</span>
                  <span class="state"></span>
                  <a-tag :color="orderStatusColor[record.status]">{{ orderStatusDict[record.status] }}</a-tag>
                </a-space>
              </template>
              <div>
                <div class="content flex-view">
                  <div class="left-list">
                    <div class="list-item flex-view">
                      <img :src="record.cover" class="thing-img" @click="handleClickItem(record)">
                      <div class="detail flex-between flex-view">
                        <div class="flex-between flex-top flex-view">
                          <span class="hover-title" @click="handleClickItem(record)">{{ record.title }}</span>
                          <span class="count">x{{ record.count }}</span>
                        </div>
                        <div class="flex-between flex-center flex-view">
                          <span class="type"></span>
                          <span class="price">¥{{ record.price }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="right-info">
                    <p class="title">
                      <span class="title">收货信息：</span>
                      <span class="name"> {{ record.receiverName }} ，</span>
                      <span class="name">{{ record.receiverPhone }}，</span>
                      <span class="name">{{ record.receiverAddress }}</span>
                    </p>
                    <p>
                      <span class="title">快递单号：</span>
                      <span>......</span>
                    </p>
                    <p>
                      <span class="title">备注信息：</span>
                      <span class="text">{{ record.remark }}</span>
                    </p>
                  </div>
                </div>
                <div class="bottom flex-view">
                  <div class="left">
                    <span class="text">共{{ record.count }}件商品</span>
                  </div>
                  <div class="right flex-view">
                    <span class="text">总计</span>
                    <span class="num">¥ {{ record.price * record.count }}</span>
                    <span class="text">优惠</span>
                    <span class="num">¥0</span>
                    <span class="text">实际支付</span>
                    <span class="money">¥ {{ record.price * record.count }}</span>
                  </div>
                </div>
              </div>
            </a-card>
          </template>
        </a-table-column>
      </a-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue';
import { BASE_URL } from "/@/store/constants";
import {
  listApi, deleteApi, cancelApi, confirmAcceptApi, confirmAllocatedApi, confirmDeliverApi,
} from '/@/api/order';
import { getFormatTime } from "/@/utils";
import { status as orderStatusDict, color as orderStatusColor } from "/@/dict/orderStatusDict";
import { useUserStore } from "/@/store";


const userStore = useUserStore();
const router = useRouter();

// 页面数据
const data = reactive({
  dataList: [],
  queryParam: {
    status: '',
    keyword: '',
    pageSize: 10,
    page: 1,
    total: 0,
    businessId: userStore.admin_user_role == '2' ? userStore.admin_user_id : '-1'
  },
  loading: false,
  selectedRowKeys: [] as any[],
});
const pagination = computed(() => <any>({
  size: 'default',
  current: data.queryParam.page,
  pageSize: data.queryParam.pageSize,
  total: data.queryParam.total,
  onChange: (current) => (data.queryParam.page = current),
  showSizeChanger: false,
  showTotal: (total) => `共${total}条数据`,
}));

onMounted(() => {
  getDataList();
});

const onTabChange = (key) => {
  if (key === '0') {
    data.queryParam.status = ''
  } else {
    data.queryParam.status = key
  }
  getDataList()
}
const onSearch = (key) => {
  getDataList()
}
const onSearchChange = (key) => {
  getDataList()
}

const getDataList = () => {
  data.loading = true;
  listApi(data.queryParam)
    .then((res) => {
      data.loading = false;
      data.dataList = res.data;
      data.queryParam.total = res.total;
      data.dataList.forEach((item: any, index: any) => {
        item.index = index + 1;
        if (item.cover) {
          item.cover = BASE_URL + '/api/staticfiles/image/' + item.cover
        }
      });
    })
    .catch((err) => {
      data.loading = false;
      console.log(err);
    });
};


const rowSelection = ref({
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    data.selectedRowKeys = selectedRowKeys;
  },
});

const handleClickItem = (record) => {
  let text = router.resolve({ name: 'detail', query: { id: record.thingId } })
  window.open(text.href, '_blank')
}

const confirmCancel = (record: any) => {
  cancelApi({ id: record.id })
    .then((res) => {
      getDataList();
      message.success('取消成功')
    })
    .catch((err) => {
      message.error(err.msg || '操作失败');
    });
};

const confirmDelete = (record: any) => {
  deleteApi({ ids: record.id })
    .then((res) => {
      message.success('删除成功')
      getDataList();
    })
    .catch((err) => {
      message.error(err.msg || '操作失败');
    });
};
const confirmAccept = (record: any) => {
  confirmAcceptApi({ id: record.id })
    .then((res) => {
      message.success('接单成功')
      getDataList();
    })
    .catch((err) => {
      message.error(err.msg || '操作失败');
    });
};
const confirmAllocated = (record: any) => {
  confirmAllocatedApi({ id: record.id })
    .then((res) => {
      message.success('配货成功')

      getDataList();
    })
    .catch((err) => {
      message.error(err.msg || '操作失败');
    });
};
const confirmDeliver = (record: any) => {
  confirmDeliverApi({ id: record.id })
    .then((res) => {
      message.success('发货成功')
      getDataList();
    })
    .catch((err) => {
      message.error(err.msg || '操作失败');
    });
};

const handleBatchDelete = () => {
  console.log(data.selectedRowKeys);
  if (data.selectedRowKeys.length <= 0) {
    console.log('hello');
    message.warn('请勾选删除项');
    return;
  }
  deleteApi({ ids: data.selectedRowKeys.join(',') })
    .then((res) => {
      message.success('删除成功');
      data.selectedRowKeys = [];
      getDataList();
    })
    .catch((err) => {
      message.error(err.msg || '操作失败');
    });
};

</script>

<style scoped lang="less">
.page-view {
  min-height: 100%;
  background: #fff;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.table-operations {
  margin-bottom: 16px;
  text-align: right;
}

.table-operations>button {
  margin-right: 8px;
}

.order-item-view {

  .header {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    font-size: 14px;

    .text {
      color: #6f6f6f;
    }

    .mg-4 {
      margin-left: 4px;
    }

    .num {
      font-weight: 500;
      color: #152844;
    }

    .num {
      font-weight: 500;
      color: #152844;
    }

    .time {
      color: #152844;
    }

    .state {
      color: #ff7b31;
      font-weight: 600;
      margin-left: 10px;
    }
  }

  .content {
    padding: 12px 0;
    overflow: hidden;

    .left-list {
      overflow: hidden;
      -webkit-box-flex: 2;
      -ms-flex: 2;
      flex: 2;
      padding-right: 16px;

      .list-item {
        height: 60px;
        margin-bottom: 12px;
        overflow: hidden;
        cursor: pointer;
      }

      .thing-img {
        width: 80px;
        margin-right: 12px;
      }

      .detail {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
      }

      .flex-between {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
      }

      .flex-between {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
      }

      .flex-top {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
      }

      .name {
        color: #152844;
        font-weight: 600;
        font-size: 14px;
        line-height: 18px;
      }

      .count {
        color: #484848;
        font-size: 12px;
      }

      .flex-between {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
      }

      .flex-center {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
      }

      .type {
        color: #6f6f6f;
        font-size: 12px;
      }

      .price {
        color: #ff7b31;
        font-weight: 600;
        font-size: 14px;
      }
    }

    .right-info {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      border-left: 1px solid #cedce4;
      padding-left: 12px;
      line-height: 22px;
      font-size: 14px;

      .title {
        color: #6f6f6f;
      }

      .name {
        color: #152844;
      }

      .text {
        color: #484848;
      }

      .mg {
        margin-bottom: 4px;
      }
    }
  }

  .bottom {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-top: 1px solid #cedce4;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: 14px;
    padding-top: 14px;

    .text {
      color: #6f6f6f;
    }

    .open {
      color: #4684e2;
      margin-left: 8px;
      cursor: pointer;
    }

    .right {
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
    }

    .text {
      color: #6f6f6f;
    }

    .num {
      color: #152844;
      margin: 0 40px 0 8px;
    }

    .money {
      font-weight: 600;
      font-size: 18px;
      color: #ff7b31;
      margin-left: 8px;
    }
  }

}

.order-item-view:first-child {
  margin-top: 16px;
}

.flex-view {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.hover-title {
  cursor: pointer;

  &:hover {
    color: #1890ff;
    text-decoration: underline;
  }
}
</style>
